<template>
  <div>
    <div class="shezhik">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="160px"
        class="demo-ruleForm"
      >
        <el-form-item label="博客名称" prop="blogName">
          <el-input v-model="ruleForm.blogName"></el-input>
        </el-form-item>
        <el-form-item label="作者名" prop="author">
          <el-input v-model="ruleForm.author"></el-input>
        </el-form-item>
        <el-form-item label="作者头像" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action="/api/admin/file/upload"
            :headers="uploadHeaders"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="介绍语" prop="introduction">
          <el-input type="textarea" v-model="ruleForm.introduction"></el-input>
        </el-form-item>
        <el-form-item label="开启 GitHub 访问" prop="delivery">
          <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.delivery"
          label="GitHub 主页访问地址"
          prop="githubHome"
        >
          <el-input
            v-model="ruleForm.githubHome"
            placeholder="请输入 GitHub 主页访问的 URL"
          ></el-input>
        </el-form-item>
        <el-form-item label="开启 CSDN 访问" prop="csdn">
          <el-switch v-model="ruleForm.csdn"></el-switch>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.csdn"
          label="CSDN  主页访问地址"
          prop="csdnHome"
        >
          <el-input
            v-model="ruleForm.csdnHome"
            placeholder="请输入 CSDN 主页访问的 URL"
          ></el-input>
        </el-form-item>
        <el-form-item label="开启 Gitee 访问" prop="gitee">
          <el-switch v-model="ruleForm.gitee"></el-switch>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.gitee"
          label="Gitee  主页访问地址"
          prop="giteeHome"
        >
          <el-input
            v-model="ruleForm.giteeHome"
            placeholder="请输入 Gitee  主页访问的 URL"
          ></el-input>
        </el-form-item>
        <el-form-item label="开启知乎访问" prop="zhihu">
          <el-switch v-model="ruleForm.zhihu"></el-switch>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.zhihu"
          label="知乎主页访问地址"
          prop="zhihuHome"
        >
          <el-input
            v-model="ruleForm.zhihuHome"
            placeholder="请输入 知乎 主页访问的 URL"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadHeaders: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
      imageUrl: "",
      ruleForm: {
        blogName: "",
        author: "",
        avatar: "",
        introduction: "",
        delivery: false,
        zhihu: false,
        csdn: false,
        gitee: false,
        githubHome: "",
        csdnHome: "",
        giteeHome: "",
        zhihuHome: "",
        id: 1,
      },
      rules: {
        blogName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        author: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        avatar: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        introduction: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getshe();
  },
  methods: {
    async getsi() {
      let res = await this.$axios.post(
        "/admin/blog/setting/update",
        this.ruleForm
      );
      console.log(res);
      this.getshe();
    },
    handleAvatarSuccess(res) {
      console.log("上传成功返回：", res);
      this.ruleForm.avatar = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getsi();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async getshe() {
      let res = await this.$axios.post("/blog/setting/detail");
      console.log(res);
      this.ruleForm = res.data.data;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.shezhik {
  background-color: #fff;
  /* width: 600px; */
  /* height: 600px; */
  margin-top: 4.375rem;
  padding: 1.25rem;
}
.el-form-item {
  /* width: 31.25rem;     */
  text-align: left;
}
.el-form-item__label {
  width: 18.75rem;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-form-item label {
  width: 12.5rem;
}
</style>